<template>
  <div id="home-search">
    <c-title text="搜索"></c-title>
    <div class="top-pane">
      <van-popover v-model="showPopover" trigger="click" :actions="actions"  @select="onSelect" @open="onOpen">
        <template #reference>
          <span>{{actions_name}}<van-icon name="arrow-down" class="arrow-down-sty"/></span>
        </template>
      </van-popover>
      <form @submit.prevent action="#" style="width: 85%;">
        <van-search v-model="name" placeholder="搜索需求/师傅" shape="round" @search="inputValue" @clear="inputValue" type="search"/>
      </form>
    </div>
    <d-list :loading="loading" :finished="finished" @load="onLoad" >
      <div class="technician-detail-pane" v-if="actions_name == '技师'">
        <div class="row-box" v-for="(item,index) in dataList" :key="index" @click="goDetailPage(item.id,'技师')">
          <img :src="item.personal_pic" alt="" class="box-img">
          <div class="left-rol">
            <div class="top-name">{{item.realname}}</div>
            <div class="table">
              <span class="table-name">{{item.detail_info.age}}岁</span>
              <span class="table-name" v-if="item.detail_info.native_place">{{item.detail_info.native_place	}}</span>
            </div>
            <div class="introduction">{{item.detail_info ? item.detail_info.introduce : ""}}</div>
            <div class="bottom-trp">
              <div class="price-sty"><van-icon name="star" class="star-sty img-icon" v-for="(citem,cindex) in item.star_grade" :key="cindex"/></div>
              <div class="location-sty"><img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_local (1).png" alt="" class="img-icon">{{item.distance}}{{item.unit}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="demand-detail-pane" v-if="actions_name == '需求'">
        <div class="row-box" v-for="(item,index) in dataList" :key="index" @click="goDetailPage(item.id,'需求')">
          <img :src="item.thumb_url" alt="" class="box-img">
          <div class="left-rol">
            <div class="top-name">{{item.title}}</div>
            <div class="introduction">{{item.content}}</div>
            <span class="service-time">服务时间：{{item.start_at}}-{{item.finish_at.split(' ')[0]}}</span>
            <div class="bottom-trp">
              <div class="price-sty"> <span class="price-symbol">￥</span>{{item.service_fee}}</div>
              <div class="location-sty"><img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_local (1).png" alt="" class="img-icon">{{item.distance}}{{item.unit}}</div>
            </div>
          </div>
        </div>
      </div>
    </d-list>
  </div>
</template>
<script>
import search_controller from "./search_controller";

export default search_controller;
</script>
<style>
.van-popover--light .van-popover__arrow {
  opacity: 0;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
#home-search {
  .top-pane {
    display: flex;
    background: white;
    align-items: center;
    padding-left: 0.6rem;

    .arrow-down-sty {
      margin-left: 0.2rem;
    }
  }

  .technician-detail-pane {
    .row-box {
      background: white;
      display: flex;
      padding: 0.6rem;
      margin-top: 0.4rem;

      .box-img {
        width: 6.45rem;
        height: 6.45rem;
        border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
        margin: 0;
      }

      .left-rol {
        margin-left: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: calc(100% - 6.45rem);

        .top-name {
          text-align: left;
          font-size: 0.8rem;
          font-weight: 600;
          color: #333;
        }

        .table {
          text-align: left;
          line-height: 1;

          .table-name {
            background: #ffeedf;
            border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
            padding: 0.15rem 0.5rem;
            font-size: 0.7rem;
            font-weight: 400;
            color: #ff9c43;
            margin-right: 0.4rem;
          }
        }

        .introduction {
          text-align: left;
          font-size: 0.75rem;
          font-weight: 400;
          color: #999;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          word-break: break-all;
          overflow: hidden;
        }

        .bottom-trp {
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: 1;

          .price-sty {
            font-size: 0.85rem;
            font-weight: 500;
            color: #ff9c43;

            .price-symbol {
              font-size: 0.7rem;
            }
          }

          .location-sty {
            font-size: 0.75rem;
            font-weight: 400;
            color: #999;
            display: flex;
            align-items: center;

            img {
              margin-right: 0.2rem;
            }
          }
        }
      }
    }
  }

  .demand-detail-pane {
    .row-box {
      background: white;
      display: flex;
      padding: 0.6rem;
      margin-top: 0.4rem;

      .box-img {
        width: 6.45rem;
        height: 6.45rem;
        border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
        margin: 0;
      }

      .left-rol {
        width: calc(100% - 6.45rem);
        margin-left: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top-name {
          text-align: left;
          font-size: 0.8rem;
          font-weight: 400;
          color: #333;
        }

        .introduction {
          text-align: left;
          font-size: 0.7rem;
          font-weight: 400;
          color: #999;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          word-break: break-all;
          overflow: hidden;
        }

        .service-time {
          font-size: 0.75rem;
          font-weight: 400;
          color: #ff9c43;
          background: #ffeedf;
          border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
          padding: 0.2rem 0.3rem;
          width: fit-content;
          text-align: left;
          line-height: 1;
        }

        .bottom-trp {
          display: flex;
          justify-content: space-between;

          .price-sty {
            font-size: 0.85rem;
            font-weight: 500;
            color: #ff9c43;

            .price-symbol {
              font-size: 0.7rem;
            }
          }

          .location-sty {
            font-size: 0.75rem;
            font-weight: 400;
            color: #999;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }

  .img-icon {
    width: 0.85rem;
    height: 0.85rem;
  }
}
</style>
